<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
        <span class="iconfont icon-settings__eas"></span>
        <p class="title">有品生鲜美食</p>
        <span class="iconfont icon-shaixuanfenlei"></span>
    </header>
    <main>
        <div class="option">
            <p>
                <span class="iconfont icon-star"></span>
                超值精选
            </p>
            <p>
                <span class="iconfont icon-vip"></span>
                潮流科技
            </p>
            <p>
                <span class="iconfont icon-shield"></span>
                品质保证
            </p>
        </div>
        <div class="banner">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../public/imgs/8.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <ul class="select">
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>新品</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>酒水</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>生鲜</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>滋补</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>速食</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>热卖</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>茗茶</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>粮油</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>特产</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <span>速食</span>
                </a>
            </li>
        </ul>
        <div class="manners">
            <p class="title">节庆好礼</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="yangrou">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
        </div>
        <div class="new">
            <p class="title">时令上新</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p class="name">肥猫球球</p>
                        <p class="price">
                            <span class="new">￥ 
                                <span class="num">698</span>
                            </span>
                        </p>
                        <p class="year">年货节</p>
                    </a>
                </li>
            </ul>
        </div>
    </main>
    <footer>
        <a href="#">
            <img src="../../public/imgs/8.png" alt="">
            <span>生鲜食品</span>
        </a>
        <a href="#">
            <img src="../../public/imgs/8.png" alt="">
            <span>茅台酒饮</span>
        </a>
    </footer>
</body>

</html>